$(function () {
    // 1、按下回车，把文本框里的数据存储到 本地存储里面
    // 注意数据存储的格式：  var todolist = [{title: 'xxx', done: false}]   
    load() // 页面一加载，就渲染数据
    $('#title').on('keydown', function (event) {
        if (event.keyCode === 13) {     // 用户按下 回车键
            if ($(this).val().trim() !== '') {      // 如果文本框有内容
                // 先读取本地存储原来的数据 赋值给local
                let local = getData();
                // 把 local 数组进行数据更新，把最新的数据 ‘追加’ 给local数组
                local.push({ title: $(this).val(), done: false })       //按下回车，事情处于正在进行，所以是未完成的：false
                // 把 local 存储到本地存储
                saveData(local);
                // 2、将本地存储数据渲染加载到页面
                load();
                $(this).val(''); // 输入后，就清空文本框里面的内容
            } else {
                alert("请输入文本!");
            };
        };
    });

    

    // 3、删除操作 （核心思路： 事件委托 + 给每一个a自定义一个属性，其值为索引号）
    $('ol,ul').on('click', 'a', function () {
        // 先获取本地数据
        let data = getData();
        // 修改数据
        let index = $(this).attr('id');     //  attr() 获取自定义的属性
        data.splice(index, 1);      // 数组方法，splice(从哪个位置开始删除，删除几个)
        // 再保存到本地数据
        saveData(data);
        // 重新渲染页面
        load();
    })

    // 4、正在进行和已完成选项
    $('ol,ul').on('click', 'input', function () {
        // 先获取本地存储的数据
        let data = getData();
        // 修改数据（同级下的 a 有自定义的属性 id（索引号））
        let index = $(this).siblings('a').attr("id");
        data[index].done = $(this).prop("checked");     // 当前数据的done属性 = 复选框的选中状态
        // 保存数据
        saveData(data);
        // 重新渲染页面
        load();
    })

    // 封装 读取本地存储的数据 的函数
    function getData() {
        let data = localStorage.getItem("todolist");
        if (data != null) {
            return JSON.parse(data);    // 本地存储的数据是字符串格式的，但是我们需要的是对象格式的
        } else {
            return [];      // 数据存储的格式是数组，所以返回一个空数组
        }
    }

    // 封装 保存本地存储数据 的函数
    function saveData(local) {
        localStorage.setItem("todolist", JSON.stringify(local));    //本地存储的格式为 字符串
    }

    // 封装 渲染加载数据 的函数
    function load() {
        $('ol,ul').empty();    // ！渲染之前，先清空 ol 和 ul  里面的内容，不然会重复渲染（同样的数据渲染两次）
        let todoCount = 0;  // 正在进行的个数
        let doneCount = 0;  // 已经完成的个数
        let data = getData();   // 先读取本地数据
        $.each(data, function (index, value) {      // 遍历这个数据
            // 如果done为true，就渲染到 ul(已经完成)里面 （否则就到 ol(正在进行) 里面）
            if (value.done) {
                $('ul').prepend(`<li>
                                <input type='checkbox' checked='checked' title='选中'>
                                <p>${value.title}</p>
                                <a href='javascript:;' id='${index}' title='删除'></a>
                                </li>`);
                doneCount++;
            } else {
                $('ol').prepend(`<li>
                                <input type='checkbox' title='选中'>
                                <p>${value.title}</p>
                                <a href='javascript:;' id='${index}' title='删除'></a>
                                </li>`);
                todoCount++;
            }
        });
        $('#todocount').text(todoCount);    // 正在进行
        $('#donecount').text(doneCount);    // 已经完成
    }
})